<template>
	<view class="search-result-list-container">
		<empty-data v-if="isEmpty" />
		<mescroll-body v-else ref="mescrollRef" @init="mescrollInit" @down="downCallBack" @up="upCallBack">
			<block v-for="(item,index) in resultList" :key="index">
				<view class="search-result-item-box" @click="onItemClick(item)">
					<search-result-item-theme-1 v-if="!item.pic_list || item.pic_list.length ===0 " :data="item" />
					<search-result-item-theme-2 v-else-if="item.pic_list.length ===1 " :data="item" />
					<search-result-item-theme-3 v-else :data="item" />
				</view>
			</block>			
		</mescroll-body>		
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {getSearchResult} from  "api/search"
	export default {
		name:"search-result-list",
		mixins:[MescrollMixin],
		props:{
			queryStr:{
				type:String,
				required:true
			}
		},
		data() {
			return {
				resultList:[],
				page:1,
				//判断是否首次加载
				isInit:true,
				mescroll:null,
				isEmpty:false
			};
		},
		mounted() {
			this.mescroll =this.$refs.mescrollRef.mescroll
		},
		methods:{
			//首次加载回调
			async mescrollInit(){
				await this.loadSearchResult()
				this.isInit=false
				this.mescroll.endSuccess()
			},
			//下拉刷新回调
			async downCallBack(){
				if(this.isInit) return 
				this.page =1
				await this.loadSearchResult()
				this.mescroll.endSuccess()
			},
			//上拉加载回调
			async upCallBack(){
				if(this.isInit) return ;
				this.page += 1;
				await this.loadSearchResult();
				this.mescroll.endSuccess();
			},
			//获取数据的方法
			async loadSearchResult(){
				const {data:res} = await getSearchResult({
					q:this.queryStr,
					p:this.page
				})
				res.list.forEach(item=>{
					item.title =item.title.replace(/<em>/g,'<em style="color:#f94d2a;margin:0 2px">')
					item.description =item.description.replace(/<em>/g,'<em style="color:#f94d2a;margin:0 2px">')
				})
				if(this.page===1){
					this.resultList = res.list
				}else{
					this.resultList = [...this.resultList,...res.list]
				}
				if(this.resultList.length===0){
					this.isEmpty =true
				}
			},
			onItemClick(item){
				uni.navigateTo({
					url:`/subpkg/pages/blog-detail/blog-detail?author=${item.author}&articleId=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.search-result-list-container {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;
  .search-result-item-box {
    margin-bottom: $uni-spacing-col-big;
  }
}
</style>
